<template>
    <div id="location"></div>
</template>
<script>
import {remoteFactoryLocation} from '@/api/home'
import {remoteList} from '@/api/device'
export default {
    name:"MapLocation",
    data(){
        return{
            star:require('@/assets/icon_star.png'),
            liquid:require('@/assets/icon_liquid.png')
        }
    },
    mounted() {
        setTimeout(() => {
            this.$nextTick(() => {
                this.map = new AMap.Map('location');
                var styleName = "amap://styles/darkblue";
                this.map.setMapStyle(styleName);

                this.getList();
                this.getDeviceList();
                
            });
        });
    },
    methods:{
        //设备列表
        async getDeviceList(){
            let res = await remoteList({page:1,size:200});
            let {list} = res.data;
            list.map(item=>{
                console.log(item)
                let {deviceLocation,deviceName,status} = item;
                let location = deviceLocation.split(',');
                var marker = new AMap.Marker({
                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: location,
                    anchor:'bottom-center'
                });
                this.map.add(marker);

                let infoWindowContent =`
                    设备名称：${deviceName}<br/>
                    设备状态：${status=='active'?'在线':'离线'}
                `;
                let infoWindow = new AMap.InfoWindow({
                    position: location,
                    offset: new AMap.Pixel(-9, -64),
                    content: infoWindowContent
                });

                marker.on('click', ()=>{
                    infoWindow.open(this.map);
                });
            })
            this.map.clearInfoWindow();
            this.map.setFitView();
        },
        //厂区
        async getList(){
            this.map.clearMap();
            let res = await remoteFactoryLocation({page:1,size:200});
            let {list} = res.data;
            list.map(item=>{
                let {factoryLocation} = item;
                let location = factoryLocation.split(',');
                // 构造点标记
                var marker = new AMap.Marker({
                    icon:this.star,
                    position: location,
                    anchor:'bottom-center'
                });
                this.map.add(marker)
                // if(list.length==1){
                //     this.map.setZoom(12);
                //     this.map.setCenter(location)
                // }
            })
            this.map.setFitView();
        }
    }
}
</script>
<style lang="scss" scoped>
#location{
    width: 100%;
    height: 100%;
}
</style>